<template>
    <Layout class="layout">
        <Sider hide-trigger :style="{background: '#dddee4', height: 'calc(100vh - 64px)'}">
            <Menu ref="modularMenu"  width="auto" accordion=accordion :active-name="activeMenu" :open-names="open" @on-select="routeTo" :style="{height: 'calc(100vh - 60px)', overflowY: 'auto', background: '#dddee4'}">
                <Submenu name="center">
                    <template slot="title">
                        <Icon type="md-albums" />
                        个人中心
                    </template>
                    <MenuItem  style="background-color: #cacad1"  :key="j" v-for="(i,j) in menudata" :name="i.menuUrl" >
                        {{i.menuName}}
                    </MenuItem>
                </Submenu>
            </Menu>
        </Sider>
        <Content :style="{padding: '0',  background: '#f3f4f8', height: 'calc(100vh - 64px)'}">
            <router-view  @refreshTodo="refreshTodo"></router-view>
        </Content>
    </Layout>
</template>

<script>
    import {sessionStorage} from "../../../common/cacheUtils";

    export default {
        name: "modular",
        data(){
            return{
                height: 0,
                menudata: [{
                    menuUrl:'/todoList',
                    menuName:'个人待办'
                },{
                    menuUrl:'/doneList',
                    menuName:'个人已办'
                },{
                    menuUrl:'/selfList',
                    menuName:'个人上报'
                }],
                activeMenu : '' ,
                open : []
            }
        },
        watch: {
            selectMenu(){
                this.$refs.modularMenu.$children.forEach((item)=>{
                    item.opened = false;
                });
            }
        },
        mounted:function(){
                this.$router.push('/todoList');
                this.open = ["center"];
                this.activeMenu = "/todoList";
                this.$nextTick(() => {
                    this.$refs.modularMenu.updateOpened()
                    this.$refs.modularMenu.updateActiveName()
                })
        },
        methods: {
            routeTo(e){
                this.$router.push(e);
            },
            refreshTodo(){
                this.$emit("refreshTodo");
            }
        }
    }
</script>

<style scoped>
       .layout{
        width: 100vm;
    }

    .rotate-icon{
        transform: rotate(-90deg);
    }
    .change-icon{
        padding-left: 130px;
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
    .menu-icon{
        transition: all .3s;
    }
    .rotate-icon{
        transform: rotate(-90deg);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item:hover {
        color: #000000;
        background: #cacad1!important;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
        border-right: none;
        color: #fff;
        background: #E53935!important;
    }

    .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-item, .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-submenu-title {
        color: #757575;
    }
   .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-item:hover, .ivu-menu-dark.ivu-menu-vertical >>>.ivu-menu-submenu-title:hover {
        color: #000000;
        background: #dddee4;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened >>>.ivu-menu-submenu-title {
        color: #757575;
        background: #dddee4;
    }
    .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item:hover{
        color: #333333;
        background: #fff;
    }

    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu):hover{
        background: rgb(221, 222, 228);
    }
</style>
